<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		#d1 
		{
			width:800px;
			height: 500px;
			border:1px solid black;
			overflow: hidden;
			position: relative;
		}
		#lunbo
		{
			bottom: 10px;
			left: 300px;
			position: absolute;
		}
		#lunbo ul
		{
			list-style-type: none;
			padding: 0;
			display: inline;
		}
		#lunbo ul li
		{
			display: inline-block;
		}
		#lunbo ul li a
		{
			text-decoration: none;
		}
		#lunbo ul li a span
		{
			text-align: center; 
			font-size: small; 
			color: white;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background-color: black;
			display: block;
		}
		#lunbo ul li a:hover span
		{
			background-color: #F27B05;
		}
		#lunbo ul li a:hover div
		{
			position: absolute;
			top: 0;
			right:0;
		}
		#lunbo ul li a div 
		{
			display: none;
		}
	</style>

	<body>
		<div id="d1">
			<img src="Tu6/1111111.jpg" />
			<div id="lunbo">
				<ul>
					<li>
						<a href="#">
							<span>1</span>
							<div><img src="Tu6/1111111.jpg"/></div>
						</a>
					</li>
					<li>
						<a href="#">
							<span>2</span>
							<div><img src="Tu6/22222222.jpg"/></div>
						</a>
					</li>
					<li>
						<a href="#">
							<span>3</span>
							<div><img src="Tu6/333333333.jpg"/></div>
						</a>
					</li>
					<li>
						<a href="#">
							<span>4</span>
							<div><img src="Tu6/4444444.jpg"/></div>
						</a>
					</li>
					<li>
						<a href="#">
							<span>5</span>
							<div><img src="Tu6/55555555.jpg"/></div>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>